<template>
  <div>
    <div class="checkbox">
      <div class="checkbox__1">
        <input id="checkbox-1" type="checkbox" />
        <label for="checkbox-1">
          <icon-font type="icon-gou" />
        </label>
      </div>
      <div class="checkbox__2">
        <input id="checkbox-2" type="checkbox" checked />
        <label for="checkbox-2">
          <icon-font type="icon-gou" />
        </label>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { IconFont } from '@/base-ui/Icons/index'
</script>
<style lang="less" scoped>
/*  CHECKBOX  */
.checkbox {
  grid-column: 1/2;
  display: grid;
  grid-template-columns: repeat(2, 6rem);
  grid-gap: 3rem;
  justify-content: center;
}
.checkbox input {
  display: none;
}
.checkbox__1,
.checkbox__2 {
  width: 6rem;
  display: flex;
  justify-content: center;
}
.checkbox__1 label,
.checkbox__2 label {
  box-shadow: 0.3rem 0.3rem 0.6rem @greyLight-2, -0.2rem -0.2rem 0.5rem @white;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  width: 2.8rem;
  height: 2.8rem;
}
.checkbox__1 label:hover i,
.checkbox__2 label:hover i {
  color: @primary;
}
.checkbox__1 label i,
.checkbox__2 label i {
  font-size: 1.8rem;
  font-weight: 700;
  color: @greyDark;
  transition: 0.3s ease;
}
.checkbox__1 input:checked ~ label,
.checkbox__2 input:checked ~ label {
  box-shadow: inset 0.2rem 0.2rem 0.5rem @greyLight-2,
    inset -0.2rem -0.2rem 0.5rem @white;
}
.checkbox__1 input:checked ~ label i,
.checkbox__2 input:checked ~ label i {
  color: @primary;
}
</style>
